<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Photo Sphere Viewer</title>
    <meta name="viewport" content="initial-scale=1.0" />
    <script src="./js/three.min.js"></script>
    <script src="./js/photo-sphere-viewer.min.js"></script>

    <style>
        html,
        body {
            margin: 20px 0;
            width: 100%;
            height: 100%;
        }
        
        #container {
            width: 80%;
            height: 400px;
            margin: 0 auto;
        }
        
        #your-pano {
            width: 80%;
            height: 400px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <p style="text-align: center">通过下面的按钮你可以上传自己电脑上的全景图来查看效果。代码使用FileReader API </p>


    <form method="get" action="index.html">
        <p style="text-align: center;">
            <input type="file" name="pano" id="pano" />
        </p>
    </form>
    <div id="your-pano"> <i>你的图片会显示在这里</i> </div>



    <script>
        var div = document.getElementById('container');
        var PSV = new PhotoSphereViewer({
            panorama: '1.jpg',
            container: div,
            time_anim: 3000,
            navbar: true,
            navbar_style: {
                backgroundColor: 'rgba(58, 67, 77, 0.7)'
            },
        });

        document.getElementById('pano').addEventListener('change', upload, false);

        // Load a panorama stored on the user's computer
        function upload() {
            // Retrieve the chosen file and create the FileReader object
            var file = document.getElementById('pano').files[0];
            var reader = new FileReader();

            reader.onload = function() {
                var oDiv = document.getElementById('your-pano');
                var PSV = new PhotoSphereViewer({
                    panorama: reader.result,
                    container: oDiv,
                    time_anim: 3000,
                    navbar: true,
                    navbar_style: {
                        backgroundColor: 'rgba(58, 67, 77, 0.7)'
                    },
                });
            };

            reader.readAsDataURL(file);
            console.log(file);
        }
    </script>

</body>

</html>